<script>

import { page } from "@/api/product/monitorRecord";
import { globalLoading, gotoLink, isNull } from "@/utils/service";

export default {
  name: "index",
  data() {
    return {
      table: {
        loading: false,
        data: [],
        total: 0,
        pages: 0
      },
      query: {
        lookMe: true,
        adId: undefined,
        productId: undefined,
        skuId: undefined,
        skuContent: undefined,
        pushUnitId: undefined,
        sortMode: "ASC",
        sortField: undefined,
        pageNo: 1,
        pageSize: 30
      }
    };
  },
  created() {
    this.getTable();
  },
  methods: {
    isNull,
    tableSort({ column, prop, order }) {
      console.log(column, prop, order);
      this.query.sortField = prop;
      switch (order){
        case 'ascending':
          this.query.sortMode = "ASC"
          break;
        case 'descending':
          this.query.sortMode = "DESC"
          break;
        default:
          this.query.sortMode = undefined
          this.query.sortField = undefined
      }
      this.getTable()
    },
    resetQuery() {
      this.query.adId = undefined;
      this.query.productId = undefined;
      this.query.skuId = undefined;
      this.query.skuContent = undefined;
      this.query.pushUnitId = undefined;
      this.query.sortMode = undefined;
      this.query.sortField = undefined;
      this.getTable();
    },
    handleCommand(command, row) {
      switch (command) {
        case "gotoDetails":
          this.gotoDetails(row.productId, row.skuId);
          break;
        default:
          this.$message.warning(`不支持的操作 : ${command}`);
      }
    },
    gotoDetails(productId, skuId) {
      gotoLink(`https://item.taobao.com/item.htm?id=${productId}&skuId=${skuId}`);
    },
    pageSizeChange(v) {
      this.query.pageSize = v;
      this.getTable();
    },
    pageNoChange(v) {
      this.query.pageNo = v;
      this.getTable();
    },
    getTable() {
      this.table.loading = true;
      page(this.query).then(r => {
        this.table.data = r.list;
        this.table.pages = r.pages;
        this.table.total = r.total;
      }).finally(() => {
        this.table.loading = false;
      });
    }
  }
};
</script>

<template>
  <div>
    <div>
      <el-form :data="query" :inline=true size="mini" style="margin-top: 10px">
        <el-form-item prop="lookMe" label="数据范围" v-role="'超级管理员'">
          <el-radio-group v-model="query.lookMe" @input="getTable">
            <el-radio :label="true">只看自己</el-radio>
            <el-radio :label="false">查看所有</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="adId" label="管理员编号" v-role="'超级管理员'">
          <el-input v-model.number="query.adId" placeholder="管理员编号(精确)"></el-input>
        </el-form-item>
        <el-form-item prop="productId" label="商品编号">
          <el-input v-model.number="query.productId" placeholder="商品编号(精确)"></el-input>
        </el-form-item>
        <el-form-item prop="pushUnitId" label="发布单元编号">
          <el-input v-model.number="query.pushUnitId" placeholder="发布单元编号(精确)"></el-input>
        </el-form-item>
        <br />
        <el-form-item prop="skuId" label="sku编号">
          <el-input v-model.number="query.skuId" placeholder="sku编号(精确)"></el-input>
        </el-form-item>
        <el-form-item prop="skuContent" label="sku正文">
          <el-input v-model.number="query.skuContent" placeholder="sku正文(模糊)"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getTable">搜索</el-button>
          <el-button type="info" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div style="margin: 0 0 10px 0">
      <el-table
        @sort-change="tableSort"
        :row-style="{height: '20px'}"
        :cell-style="{padding: '0'}"
        height="71vh"
        :v-loading="table.loading"
        :data="table.data"
        :stripe=true
        :border=true
      >

        <el-table-column
          width="150"
          prop="productId"
          label="目标商品编号"
          align="center"
          show-overflow-tooltip
          fixed="left"
        >
        </el-table-column>

        <el-table-column
          width="150"
          prop="skuId"
          label="sku编号"
          align="center"
          show-overflow-tooltip
          fixed="left"
        >
        </el-table-column>

        <el-table-column
          width="150"
          prop="price"
          label="价格"
          align="center"
          show-overflow-tooltip
          fixed="left"
        >

        </el-table-column>

        <el-table-column
          width="300"
          prop="skuContent"
          label="sku正文"
          align="center"
          show-overflow-tooltip
          fixed="left"
        >
        </el-table-column>

        <el-table-column
          width="150"
          prop="id"
          label="编号"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          width="150"
          prop="pushUnitId"
          label="发布单元编号"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          width="150"
          prop="adId"
          label="管理员编号"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          sortable
          width="180"
          prop="createTime"
          label="创建时间"
          align="center"
          fixed="right"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          fixed="right"
        >
          <template slot-scope="{row}">
            <el-dropdown style="margin-left: 10px" @command="handleCommand($event,row)">
              <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="gotoDetails">打开商品详情页</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div style="text-align: center;margin: 10px 0">
      <el-pagination
        background
        layout="sizes,prev, pager, next, jumper, ->, total"
        :total="table.total"
        :page-size="query.pageSize"
        :current-page="query.pageNo"
        :page-count="table.pages"
        :page-sizes="[10,30,50,100]"
        @size-change="pageSizeChange"
        @current-change="pageNoChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<style scoped>

</style>